<template>
  <!-- 解决闪烁问题 -->
  <view v-if="listDetail.goods_name" class="uni-container">
    <!-- 轮播图 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <!-- 点击事件绑给item竟然不行，很奇怪 -->
      <swiper-item v-for="(item,index) in listDetail.pics" :key="index">
        <image :src="item.pics_big" @click="seePic(index)"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息区域 -->
    <view class="goods-info">
      <view class="goods-info-price">
        ￥{{listDetail.goods_price}}
      </view>

      <view class="goods-info-main">
        <view class="goods-info-info">
          {{listDetail.goods_name}}
        </view>
        <view class="goods-info-shoucang" @click="save">
          <uni-icons type="heart-filled" size="20" ref="uni"></uni-icons>
          <text>收藏</text>
        </view>
      </view>

      <view class="goods-info-text">
        <text>快递: 免运费</text>
      </view>

    </view>

    <!-- 图文展示 -->
    <rich-text :nodes="listDetail.goods_introduce"></rich-text>

    <view class="goods-carts">
      <uni-goods-nav :fill="true" :options="options" :button-group="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>
  </view>

</template>

<script>
  import {
    mapState,
    mapActions,
    mapGetters,
    mapMutations
  } from 'vuex'

  export default {
    computed: {
      //这样写会报错，微信小程序工具没有$store，没有state
      // carts: (state) => {
      //   console.log(state)
      // },
      //使用store中数据
      ...mapState('cart', ['cart']),
      ...mapGetters('cart', ['totals'])
    },

    watch: {
      totals: {
        //在发现变化时，立刻先进行一次渲染
        immediate: true,
        handler(newValue) {
          //直接赋值
          this.options[2].info = newValue
        }
      }

    },

    data() {
      return {
        //要查看的商品id
        goods_id: 0,
        //商品详情
        listDetail: {},
        changeColor: false,

        //导航栏配置对象 左侧
        options: [{
          icon: 'chat',
          text: '客服'
        }, {
          icon: 'shop',
          text: '店铺',
        }, {
          icon: 'cart',
          text: '购物车',
          info: 0
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
            color: '#fff'
          }
        ],
      }
    },

    onLoad(options) {
      this.goods_id = options.goods_id
      this.getDetail(this.goods_id)
    },

    methods: {
      ...mapActions('cart', ['addtocart']),
      ...mapMutations('goods_save', ['updateGoodsSave']),


      async getDetail(goods_id) {
        let {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/detail', {
          goods_id
        })
        if (res.meta.status === 200) {
          //解决分隔问题和在ios webp不显示问题
          res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ')
            .replace(/webp/g, 'jpg')
          this.listDetail = res.message
        }

      },

      //查看轮播图预览
      seePic(index) {
        uni.previewImage({
          current: index,
          //urls 要预览图片的url数组 ，所以采用map方式取出url地址
          urls: this.listDetail.pics.map(x => x.pics_big)
        })
      },

      //点击收藏事件
      save() {
        // if (this.$refs.uni.color == "#333333") {
        // this.$set(this.$refs.uni.color, 'gray')

        // } else {
        //   this.$set(this.$refs.uni.color, '#333333')
        // }
        // console.log(this.$refs.uni)
        //将该商品传给收藏界面 —— 整理参数
        const saveObj = {
          goods_id: this.listDetail.goods_id,
          goods_price: this.listDetail.goods_price,
          goods_small_logo: this.listDetail.goods_small_logo,
          goods_name: this.listDetail.goods_name,
        }
        //传给仓库中进行保存
        this.updateGoodsSave(saveObj)

        // 不知道怎么更改icon的颜色 ？？？
      },

      //点击客服|店铺|购物车 跳转到相应页面
      onClick(e) {
        if (e.index === 0) {
          console.log('客服')
        } else if (e.index === 1) {
          console.log('店铺')
        } else {
          //跳转到购物车界面
          uni.switchTab({
            url: '/pages/cart/cart'
          })
        }
      },

      //点击加入购物车|立即购买按钮
      buttonClick(e) {
        if (e.content.text === '加入购物车') {
          //定义一个对象  包含{ goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
          let goods = {
            goods_id: this.listDetail.goods_id,
            goods_name: this.listDetail.goods_name,
            goods_price: this.listDetail.goods_price,
            goods_count: 1,
            goods_small_logo: this.listDetail.goods_small_logo,
            goods_state: false //商品的勾选状态
          }
          //调用vuex中的函数
          this.addtocart(goods)

        } else { //立即购买 跳转到支付页面
          console.log('跳转到支付页面')
        }
      },
    },
  }
</script>

<style lang="scss">
  .uni-container {
    padding-bottom: 50px;

  }

  swiper {
    height: 750rpx;

    & image {
      width: 100%;
      height: 100%;
    }
  }

  .goods-info {
    height: 130px;

    .goods-info-price {
      color: #c00000;
      font-weight: bold;
      font-size: 20px;
      margin: 10px 10px;
    }

    .goods-info-main {
      display: flex;
      margin-bottom: 10px;

      .goods-info-info {
        padding: 0px 15px;
        width: 75%;
        height: 50px;
        font-size: 12px;
        border-right: 2px solid #efefef;
      }

      .goods-info-shoucang {
        width: 15%;
        display: flex;
        //以列为主轴
        flex-direction: column;
        justify-content: center;
        text-align: center;

        & text {
          text-align: center;
          font-size: 12px;
          color: gray;
        }
      }
    }
  }

  .goods-info-text {
    display: block;
    z-index: 999;

    text {
      margin-left: 10px;
      font-size: 12px;
      color: gray;
    }
  }

  .goods-carts {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>
